<template>
	<view class="calendar">
		<view class="calendar-top">
			<view class="top-btn">
				<text @click="handleCalendar(0)">上一月</text>
			</view>
			<view class="top-date">
				<text>{{year}} 年 {{month < 10 ? '0' + (month + 1) : month + 1}} 月</text>
			</view>
			<view class="top-btn">
				<text @click="handleCalendar(1)">下一月</text>
			</view>
		</view>
		<view class="calendar-content">
			<view class="calendar-week">
				<view class="week-item" v-for="(weekItem,weekIndex) in weekList" :key="weekIndex">
					<text>{{weekItem}}</text>
				</view>
			</view>
			<view class="calendar-day">
				<view class="day-item" @click="bindDayDataTap(dayItem,dayIndex)" v-for="(dayItem,dayIndex) in days" :key="dayIndex">
					<text :style="select == dayIndex ? 'position: relative;z-index: 2;color:#FFF;' : 'color:#333;'">{{dayItem.day || ''}}</text>
					<view v-if="dayItem.day && select == dayIndex" class="select-click"></view>
					<view class="day-tody" v-if="dayItem.day && dayItem.today"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-calendar",
		data() {
			return {
				weekList:['日','一','二','三','四','五','六'],
				today: parseInt(new Date().getDate()), //今天
				month: parseInt(new Date().getMonth()), //本月
				year: parseInt(new Date().getFullYear()), //本年
				days:[],
				select:false,
				currentDate:{
					day: parseInt(new Date().getDate()), 
					month: parseInt(new Date().getMonth() + 1), 
					year: parseInt(new Date().getFullYear())
				}
			}
		},
		created() {
			this.calculateEmptyGrids(this.year, this.month);
			this.calculateDays(this.year, this.month);
		},
		methods: {
			// 获取当月共多少天
			getThisMonthDays(year, month) {
				return new Date(year, month +1, 0).getDate()
			},
			// 获取当月第一天星期几
			getFirstDayOfWeek(year, month) {
				return new Date(Date.UTC(year, month, 1)).getDay();
			},
			// 计算当月1号前空了几个格子，把它填充在days数组的前面
			calculateEmptyGrids(year, month) {
				//计算每个月时要清零
				this.days = [];
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						var obj = {
							day: false,
							isSign: false
						}
						this.days.push(obj);
					}
				}
			},
			// 绘制当月天数占的格子，并把它放到days数组中
			calculateDays(year, month) {
				const thisMonthDays = this.getThisMonthDays(year, month);
				for (let i = 1; i <= thisMonthDays; i++) {
					var obj = {
						date: i,
						isSign: false
					}
					this.days.push(this.getDateInfo(i));
				}
			},
			/* 获取当前日期对应数据 */
			getDateInfo(day){
				let data = {};
				data.day = day < 10 ? '0'+ day : day;
				data.month =  parseInt(this.month)+1 < 10 ? '0' +  (parseInt(this.month) + 1) :  parseInt(this.month) + 1;
				data.year = this.year;
				data.date = this.year + '-' + data.month + '-' + data.day;
				data.time = new Date(data.date).getTime();
				data.backstageTime = new Date(data.date).getTime() / 1000;
				let currentTime = new Date(this.currentDate.year + '-' + (this.currentDate.month > 10 ? this.currentDate.month :'0' + this.currentDate.month) + '-' +this.currentDate.day).getTime();
				// console.log(currentTime,11)
				if(data.time == currentTime){
					data.today = true;
				}else{
					data.today = false;
				}
				return data
			},
			/* 获取上一月下一月 */
			async handleCalendar(type) {
				this.select = false;
				if (type === 0) { //上个月
					if (this.month == 0) {
						this.year --;
						this.month = 11;
					}else{
						this.month --;
					}
				} else {
					if (this.month == 11) {
						this.year ++;
						this.month = 0;
					}else{
						this.month ++;
					}
				}
				await this.calculateEmptyGrids(this.year, this.month);
				await this.calculateDays(this.year, this.month);		
			},
			/* 点击返回时间数据 */
			bindDayDataTap(item,index){
				this.select = index;
				this.$emit('currentDate', item);
			}
		}
	}
</script>

<style lang="scss"scoped>
.calendar{
	width: 600rpx;
	background: #FFFFFF;
	// height: 700rpx;
	border-radius: 20rpx;
	overflow: hidden;
	.calendar-top{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 160rpx;
		font-size: 28rpx;
		background-color: #546e7a;
		color: #FFF;
		.top-btn{
			
		}
		.top-date{
			margin: 0 36rpx;
		}
	}
	.calendar-content{
		.calendar-week{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			.week-item{
				width: calc(100% / 7);
				text-align: center;
				color: #546e7a;
			}
		}
		.calendar-day{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			.day-item{
				width: calc(100% / 7);
				padding: 15rpx 0;
				text-align: center;
				// margin-bottom: 20rpx;
				font-size: 28rpx;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;
				.select-click{
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					background-color: #546e7a;
					border-radius: 2rpx;
					z-index: 1;
					margin: 0 auto;
				}
				.day-tody{
					&::after{
						content: '今';
						display: block;
						background-color: #546e7a;
						font-size: 20rpx;
						border-radius: 50%;
						position: absolute;
						left: 50%;
						bottom: -20rpx;
						transform: translate(-50%, 0);
						width: 32rpx;
						height: 32rpx;
						line-height: 32rpx;
						color: #fff;
						z-index: 30;
					}
				}
			}
			.day-item-up{
				width: calc(100% / 7);
				text-align: center;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				color: #bebebe;
			}
		}
	}
}
</style>
